<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <h2>person.name:{{person.name}} -- person.age:{{person.age}}</h2>
        <h3>person.fav:{{person.fav}}</h3>
        <ul>
            <li>1</li>
        </ul> -->
        <h3>msg:{{msg}}</h3><hr/>
        <!-- <h3>msg:{{msg}}</h3><hr/>
        v-text="person.name":<div v-text="person.name"></div><hr/>
        v-html="htmlStr":<div v-html="htmlStr"></div><hr/>
        v-model="msg":<input type="text" v-model="msg"/><hr/>
        <button v-on:click="say">say</button>
        <button @click="say">say1</button> -->
    </div>
    <script src="./Observer.js"></script>
    <script src="./MVue.js"></script>
    <script>
        let vm = new MVue({
            el:"#app",
            data:{
                person:{
                    name:'麻勤登',
                    age:21,
                    fav:'ll'
                },
                msg:"111111",
                htmlStr:'<span style="color:red;">666</span>'
            },
            methods:{
                say(){
                    console.log('say')
                    this.msg='hello'
                }
            }
        })
    </script>
</body>
</html>